<template>
    <div id='iForm' class='i-form'>
        <Card v-if="config.isShow" :bordered="false" dis-hover class="list-table-list-card ivu-mt" ref="card" style="height: 100%;width:99%;">
            <Form :ref="config.name" :model="bindData" :rules="config.rules" label-position="right" :label-width="config.labelWidth">
                <Row :gutter="24" type="flex" justify="start">
                    <template v-for="(item,index) in config.form">
                        <Col v-bind="item.grid||config.grid" :class="'ivu-text-'+ item.textAlign" :style="{'--cumColor':item.cumColor}">
                        <FormItem :label="item.label" :key="index" :prop="item.key|fetProp(Object.keys(bindData))" :class="item.class" :style="item.style" :label-width="item.labelWidth">
                            <!-- input框 -->
                            <Input :style="{'--bgColor':item.bgColor,'--titClolr':item.color,'--titWidth':item.btnWidth}" class="inputBtnBefore" v-if="item.type=='inputBtnBefore'" :show-word-limit="item.showwordlimit " :maxlength="item.maxlength" :type="item.dataType" v-model="bindData[item.key]" :disabled="item.disabled" :autosize="item.autosize" :placeholder="item.placeholder">
                            <template #append>
                                <div v-if="item.event" @click="item.event(item)">{{item.btnName}}</div>
                                <div v-else>{{item.btnName}}</div>
                            </template>
                            </Input>
                            <Input :autocomplete="item.dataType == 'password' ? 'new-password' : ''" v-if="item.type=='input'" :show-word-limit="item.showwordlimit " :maxlength="item.maxlength" :type="item.dataType" v-model="bindData[item.key]" :disabled="item.disabled" :autosize="item.autosize" :placeholder="item.placeholder" />
                            <Icon v-if="item.icon" :type="item.icon" slot="prepend" />
                            </Input>
                            <!-- select框 -->
                            <Select v-else-if="item.type == 'select'" v-model="bindData[item.key]" @on-clear="onClearChange(bindData[item.key],item)" :clearable="item.clearable" :placeholder="item.placeholder" :remote-method="item.remoteMethod?(query)=>{item.remoteMethod(query,item)}:null" :style="item.style?item.style:{}" :filterable="item.filterable" :loading="item.loading" :multiple="item.multiple" :disabled="item.disabled" :label-in-value="item['label-in-value']" :placement="item.placement" :size="item.size" @on-change="selectChange(bindData[item.key],item)">
                                <Option v-for="itemC in item.option" :key="itemC.value" :value="itemC.value">{{itemC.label}}</Option>
                            </Select>
                            <!-- 日期选择 -->
                            <DatePicker v-else-if="item.type=='datePicker'" :disabled="item.disabled" :type="item.dataType" v-width="'100%'" v-model="bindData[item.key]" :placeholder="item.placeholder" :element-id="item.key+'date'" :style="item.style" :size="item.size" />
                            <!-- 日期双选 -->
                            <Row v-else-if="item.type=='dbDatePicker'">
                                <Col span="11">
                                <FormItem :prop="item.double.first.key|fetProp(Object.keys(bindData))">
                                    <DatePicker :type="item.double.first.dataType" v-width="'100%'" :disabled="item.double.first.disabled" v-model="bindData[item.double.first.key]" :placeholder="item.double.first.placeholder" :element-id="item.double.first.key+'date'" :style="item.double.first.style" :size="item.double.first.size" />
                                </FormItem>
                                </Col>
                                <Col span="2" style="text-align: center">-</Col>
                                <Col span="11">
                                <FormItem :prop="item.double.second.key|fetProp(Object.keys(bindData))">
                                    <DatePicker :type="item.double.second.dataType" v-width="'100%'" :disabled="item.double.second.disabled" v-model="bindData[item.double.second.key]" :placeholder="item.double.second.placeholder" :element-id="item.double.second.key+'date'" :style="item.double.second.style" :size="item.double.second.size" />
                                </FormItem>
                                </Col>
                            </Row>
                            <!-- 多选 -->
                            <CheckboxGroup v-else-if="item.type=='checkBox'" v-model="bindData[item.key]" :style="item.style?item.style:{}" :size="item.size">
                                <Checkbox v-for="(chItem,index) in item.checkBoxData" :key="index" :label="chItem.value" :disabled="item.disabled">{{ chItem.lable }}</Checkbox>
                            </CheckboxGroup>
                            <InputNumber v-else-if="item.type=='inputNumber'" @on-change="inputNumberOnChange(bindData[item.key],item)" :max="item.max" :min="item.min" v-model="bindData[item.key]" style="width:100%"></InputNumber>
                            <!-- 单选 -->
                            <RadioGroup v-else-if="item.type=='radio'" v-model="bindData[item.key]" :style="item.style?item.style:{}">
                                <Radio v-for="(chItem,index) in item.radioData" :key="index" :label="chItem.value" :disabled="item.disabled">{{ chItem.lable }}</Radio>
                            </RadioGroup>
                            <TreeSelect v-else-if="item.type=='treeSelect'" @on-change="onTreeChange(bindData[item.key],item)" @on-open-change="onOpenChange" :disabled="item.disabled" v-model="bindData[item.key]" :placeholder="item.placeholder" :data="item.data" />
                            <!-- 联级选择器 -->
                            <Cascader v-else-if="item.type=='cascader'" :filterable="item.filterable" :clearable="item.clearable" :change-on-select="item.changeOnSelect" :disabled="item.disabled" :data="item.option" v-model="bindData[item.key]" :placeholder="item.placeholder" :trigger="item.trigger" @on-change='cascaderChange' />
                            <!-- switch -->
                            <div v-else-if="item.type=='examplePrompt'">
                                <div class="examplePrompt">{{item.examplePrompt}}</div>
                            </div>
                            <i-switch v-else-if="item.type=='switch'" :disabled="item.disabled" v-model="bindData[item.key]" :size="item.size">
                                <span slot="open">{{item.on}}</span>
                                <span slot="close">{{item.off}}</span>
                            </i-switch>
                            <template v-else-if="item.type=='detial'">
                                <div :style="item.style" class="detail">
                                    <span style="padding:0 0 0 0px;overflow-wrap:break-word;">{{bindData[item.key]}}</span>
                                    <span style="float:right;margin-right:10px">
                                        <Icon :type="item.icon" />
                                    </span>
                                </div>
                            </template>
                            <!-- 自定义插槽 -->
                            <slot v-else-if="item.type=='slot'" :name="item.name" :data="{item:item,prop:bindData[item.key]}" />
                            <!-- 自定义render函数式组件 -->
                            <i-icom v-else-if="item.type=='custom'" :selfStyle="item.style?item.style:{}" :configs="item.template" />
                            <!-- 自定义动态组件 -->
                            <component v-else-if="item.type =='components'" :ref="item.key" :is="item.components" :config="item.config" :style="item.style" />
                        </FormItem>
                        </Col>
                    </template>
                </Row>
            </Form>
        </Card>
    </div>
</template>
<script>
import icom from './icom'
export default {
    name: '',
    props: ['config'],
    data() {
        this.fromData = {};
        for (const key in this.config.form) {
            if (this.config.form.hasOwnProperty.call(this.config.form, key)) {
                const formItem = this.config.form[key];
                switch (formItem.type) {
                    case 'dbDatePicker':
                        this.fromData[formItem.double.first.key] = formItem.type == 'select' ? [] : ''
                        this.fromData[formItem.double.second.key] = formItem.type == 'select' ? [] : ''
                        break;
                    default:
                        if (formItem.key) {
                            this.fromData[formItem.key] = formItem.default
                        }
                        break;
                }
            }
        }
        return {
            bindData: this.fromData
        };
    },
    components: {
        'i-icom': icom
    },
    computed: {
    },
    created() { },
    mounted() { },
    methods: {
        reset(name) {
            for (let i = 0; i < this.config.form.length; i++) {
                const item = this.config.form[i];
                if (item.type == 'treeSelect') {
                    this.bindData[item.key] = ''
                    this.handelTree(item.data)
                }
            }
            this.$refs[name].resetFields();
        },
        setComponentsData(key, value, data) {
            this.$refs[key][0][value](data)
        },
        getComponentsData(key, value, cb) {
            return this.$refs[key][0].getDataForKey(value)
        },
        submit(name, cb) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    // this.$Message.success('Success!');
                    if (cb) {
                        cb(this.bindData)
                    }
                } else {
                    // this.$Message.error('Fail!');
                }
            })
        },
        onOpenChange(data) {
            // for (let i = 0; i < this.config.form.length; i++) {
            //     const item = this.config.form[i];
            //     if (item.type == 'treeSelect') {
            //         this.config.bindData[item.key] = ''
            //         this.handelTree(item.data)
            //     }
            // }
        },
        handelTree(data) {
            for (let i = 0; i < data.length; i++) {
                const item = data[i];
                item['title'] = item.label;
                if (item['selected']) {
                    item['selected'] = false;
                }
                if (item['expand']) {
                    item['expand'] = false;
                }
                if (item.children && item.children.length !== 0) {
                    this.handelTree(item.children)
                }
            }
            return data
        },
        setData(_object = {}) {
            for (const key in _object) {
                if (_object.hasOwnProperty.call(_object, key)) {
                    const _objItem = _object[key];
                    this.bindData[key] = _objItem
                }
            }
        },
        //下拉菜单改变事件
        selectChange(value, itemData) {
            this.$emit("select-change", value, itemData);
        },
        //下拉菜单清除事件
        onClearChange(value, itemData) {
            this.$emit("onClear-change", value, itemData);
        },
        // 下拉树选择变化
        onTreeChange(value, obj) {
            this.$emit('onTreeChange', value, obj)
        },
        inputNumberOnChange(value, obj) {
            this.$nextTick(() => {
                this.bindData[obj.key] = value.toString().substring(0, obj.zmax) * 1
            })
            this.$emit('onNumberChange', value, obj)
        },
        // 级联选择器变化
        cascaderChange(value, selectedData) {
            this.$emit('cascaderChange', selectedData)
        }
    },
    filters: {
        fetProp(name, array) {
            let a = array.filter((value, key) => { return value == name ? value : '' })
            return a[0]
        }
    },
    watch: {}
}
</script>
<style>
/* .i-form .ivu-form-item{ */
/* margin-bottom: 0 !important; */
/* } */
.ivu-form-item-label {
    color: var(--cumColor) !important;
}
.list-table-list-card .ivu-card-head {
    display: none;
    border-bottom: 0px solid #e8eaec !important;
}
.i_top .ivu-form-item-content {
    margin-left: 0px !important;
}
.inputBtnBefore .ivu-input-group-append {
    background-color: var(--bgColor) !important;
    color: var(--titClolr) !important;
    cursor: pointer !important;
    border: 0px solid var(--bgColor) !important;
    width: var(--titWidth) !important;
    padding: 0 !important;
}
.examplePrompt {
    color: red;
}
</style>